<template>
    <div style="height:100%;width:100%" ref="charts_left_top"></div>
</template>

<script>
    export default {

        mounted() {
            this.chartsObject = this.$highcharts.chart(
                this.$refs.charts_left_top,
                this.defaultOptions
            );
        },
        props: {
            defaultOptions: {
                type: Object,
                default() {
                    return {
                        chart: {
                            type: 'pie',
                            backgroundColor: "#010542",
                            options3d: {
                                enabled: true,
                                alpha: 55,
                                beta: 0,
                                // viewDistance: 105,
                            }
                        },
                        title: {
                            text: '12312',
                            verticalAlign: "bottom",
                            style: {
                                color: '#fff',
                                fontWeight: 'bold',
                                fontSize: "40px",
                            }
                        },
                        tooltip: {
                            enabled: false,
                        },

                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                depth: 35,
                                distance: '100%',
                                colors:["#851DFF","#F6A228","#E45932","#FEAC9C","#00FEFF","#006BFE","#8A2FFF"],
                                // innerSize:100,
                                size:270,
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.name}',
                                    style: {
                                        fontSize: "30px",
                                        color: '#fff',
                                        textOutline: 'none'
                                    }
                                }
                            }
                        },
                        credits: {
                            enabled: false // 禁用版权信息
                        },
                        series: [{
                            type: 'pie',
                            name: '浏览器占比',
                            data: [
                                ['Firefox', 45.0],
                                ['IE', 26.8],
                                {
                                    name: 'Chrome',
                                    y: 12.8,
                                    sliced: true,
                                    selected: true
                                },
                                ['Safari', 8.5],
                                ['Opera', 6.2],
                                ['Others', 0.7]
                            ]
                        }]
                    };
                }
            }
        },

        data() {
            return {
                chartsObject: null
            };
        }
    };
</script>
